<!DOCTYPE html>
<!--
  Copyright (c) 2012-2014 Google Inc.
-->
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

    <title>FusionTablesLayer Wizard</title>

    <link rel="stylesheet" href="style.css" type="text/css"></link>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="https://apis.google.com/js/client.js"></script>

<!--
To set up a working local environment, download the Closure library with
svn checkout http://closure-library.googlecode.com/svn/trunk/ closure-library
Then comment out the "builder_compiled.js" line below and uncomment the script
tags below it.
-->
    <script src="builder_compiled.js"></script>
<!--
    <script type="text/javascript" src="../../closure-library/closure/goog/base.js"></script>
    <script type="text/javascript" src="controller.js"></script>
    <script type="text/javascript" src="form.js"></script>
    <script type="text/javascript" src="html.js"></script>
    <script type="text/javascript" src="layer.js"></script>
    <script type="text/javascript" src="map.js"></script>
    <script type="text/javascript" src="search.js"></script>
    <script type="text/javascript" src="builder.js"></script>
-->

<!--
See builder.js for instructions on rebuilding builder_compiled.js.

For code reviews, you can use Rietveld:
https://codereview.appspot.com/
1. Get upload.py: http://code.google.com/p/rietveld/wiki/UploadPyUsage
2. Make the changes to the code in your svn directory
3. Use the upload.py file to create a new 'CL' in codereview.appspot.com.
   See steps 1-4 here:
   http://fwierzbicki.blogspot.com/2008/08/code-review-with-rietveld.html
-->
  </head>

  <body>
    <div id="pagewrap">
      <h1>FusionTablesLayer Wizard</h1>

      <p>
        Use this wizard with <a href="http://www.google.com/fusiontables/">
        Google Fusion Tables</a> to create maps with multiple layers,
        a search feature, or a custom-styled base map. Once the Preview shows
        your desired map, copy and paste the code from the text area
        below to display the map on your own website.
      </p>
      <p>The HTML and Javascript generated below also
        get you started using
        <a href="https://developers.google.com/maps/documentation/javascript/layers#FusionTables">
        FusionTablesLayers</a> in the Google Maps API. See
        <a href="https://developers.google.com/fusiontables/docs/sample_code#FTLayers">
        code examples</a> for
        more functionality.
      </p>
      <p class="note">Please submit bug reports to our
        <a href="https://code.google.com/p/fusion-tables-api-samples/issues/list" target="_blank">
        Issue Tracker</a>.
      </p>

      <div id="form-div">
        <h2>
          1. Add map layers
        </h2>
        <p class="note">
          The table needs to be
          <a href="http://support.google.com/fusiontables/bin/answer.py?hl=en&answer=171221"
             target="_blank">
          <b>accessible and downloadable</b></a>.</p>
        <div id="layer-forms"></div>
        <div class="form-element">
          <input type="button" id="add-layer" value="Add Layer">
        </div>

        <h2>
          2. Set map size and zoom
        </h2>

        <div class="form-element">
          Zoom and pan the preview map as you'd like it to appear.
        </div>
        <div class="form-element">
          <label>
            Dimensions:
          </label>
          <div class="right">
            Width: <input type="text" id="map-width" class="short-input"> px,
            Height: <input type="text" id="map-height" class="short-input"> px
          </div>
        </div>
       <div class="form-element" style="display:None">
          <label>
            Map Center:
          </label>
          <input type="text" id="map-center-lat"
              class="right" disabled="disabled">
          <input type="text" id="map-center-lng"
              class="right" disabled="disabled">
        </div>
        <div class="form-element" style="display:None">
          <label>
            Zoom:
          </label>
          <input type="text" id="map-zoom" class="right" disabled="disabled">
        </div>
        <div class="form-element">
          <input type="button" id="edit-map" value="Update Map" class="right">
        </div>

        <h2>
          3. Style base map
        </h2>
        <div class="form-element">
          <label>
            Show:
          </label>
          <div class="right">
            <div class="right">
              <input type="checkbox" id="all-features" checked="checked">
              <label>
                All features
              </label><br>
              <a id="specs">
                More options
              </a>
            </div>
          </div>
          <div class="clear">
            <form id="specform" class="hide">
              <div class="left right-padding">
                <b>
                  Roads
                </b><br>
                <input type="checkbox" name="specs" id="road.highway"
                  checked="checked">
                <label>
                  Highways
                </label><br>
                <input type="checkbox" name="specs" id="road.arterial"
                  checked="checked">
                <label>
                  Arterial
                </label><br>
                <input type="checkbox" name="specs" id="road.local"
                  checked="checked">
                <label>
                  Local
                </label>
              </div>
              <div class="left right-padding">
                <b>
                  Administrative
                </b><br>
                <input type="checkbox" name="specs"
                    id="administrative.country" checked="checked">
                <label>
                  Country
                </label><br>
                <input type="checkbox" name="specs"
                    id="administrative.province" checked="checked">
                <label>
                  Province
                </label><br>
                <input type="checkbox" name="specs"
                    id="administrative.locality" checked="checked">
                <label>
                  Locality
                </label><br>
                <input type="checkbox" name="specs"
                    id="administrative.neighborhood" checked="checked">
                <label>
                  Neighborhood
                </label><br>
                <input type="checkbox" name="specs"
                    id="administrative.land_parcel" checked="checked">
                <label>
                  Land parcel
                </label>
              </div>
              <div class="left">
                <b>
                  Other
                </b><br>
                <input type="checkbox" name="specs" id="poi"
                    checked="checked">
                <label>
                  Point of Interest
                </label><br>
                <input type="checkbox" name="specs" id="transit"
                    checked="checked">
                <label>
                  Transit
                </label>
              </div>
            </form>
          </div>
        </div><br>
        <div class="form-element">
          <label>
            Saturation:
          </label>
          <div class="right">
            <div class="left">
              Gray&nbsp;
            </div>
            <div id="slider" class="goog-slider left">
              <div class="goog-slider-thumb"></div>
            </div>
            <div class="left">
              &nbsp;Bright
            </div>
          </div>
        </div>
      </div>

      <div id="map-section" class="left">
        <h2 class="map-preview">
          Preview
        </h2>
        <div id="map-canvas"></div>
        <div id="search"></div>
      </div>

      <div class="clear">
        <h2>
         4. Your HTML
        </h2>
            <p class="note">
        This code uses the Google Maps JavaScript API v3, which has its own
        <a href="http://code.google.com/apis/maps/faq.html#usagelimits">
        usage limits</a> and
        <a href="http://googlegeodevelopers.blogspot.com/2011/04/updates-to-google-maps-apigoogle-earth.html">
        TOS</a>. For background, see the
        <a href="http://googlegeodevelopers.blogspot.com/2011/11/understanding-how-maps-api-usage-limits.html">
        Google Geo Developers blog</a>.
      </p>

        <textarea id="html-code"></textarea>
      </div>
    </div>

    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-9117623-10']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ?
            'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
      })();

    </script>

  </body>

</html>
